<template>
	<div class="top-bar">
		<div class="wrapper">
			<div class="top-bar-part1">
				<img class="top-bar-part1-icon" src="@/static/img/icon/battle-security.png" />
				<div class="top-bar-part1-text">公平性</div>
			</div>
			<div class="top-bar-part2">
				<img class="top-bar-part2-icon" src="@/static/img/icon/battle-box.png" />
				<div class="top-bar-part2-text">免费箱子</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'top-bar',
	setup() {
		return {};
	}
});
</script>

<style lang="scss" scoped>
.top-bar {
	width: 100%;
	height: 40px;
	background-color: #000000;
	margin: 0;
	padding: 0;
	text-align: center;

	.wrapper {
		width: 1284px;
		margin: 0 auto;
		height: 40px;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.top-bar-part1,
		.top-bar-part2 {
			width: 90px;
			height: 20px;

			display: flex;
			justify-content: flex-start;
			align-content: center;
		}

		.top-bar-part1 .top-bar-part1-icon,
		.top-bar-part2 .top-bar-part2-icon {
			width: 20px;
			height: 20px;
			object-fit: contain;
			margin-right: 8px;
		}

		.top-bar-part1 .top-bar-part1-text,
		.top-bar-part2 .top-bar-part2-text {
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 19.6px;
		}

		.top-bar-part1 .top-bar-part1-text {
			color: rgb(137, 137, 163);
		}

		.top-bar-part12.top-bar-part2-text {
			color: rgb(170, 255, 84);
		}
	}
}
</style>
